const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入index.html文件

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //每次打包清理上次的打包

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //希望css打包后是单独的文件
//相对路径转绝对路径的函数
const resolvePath = (_path) => path.resolve(__dirname, _path);

const baseConfig = {
  entry: resolvePath("../src/index.jsx"), //入口文件
  output: {
    //输出位置
    path: resolvePath("../dist"),
    filename: "[name].bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"], //配置css less postcss
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
      {
        test: /\.jsx$/,
        use: "babel-loader",
      },
      {
        test: /\.svg$/,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      //引入index.html文件--配置
      template: resolvePath("../public/index.html"),
      filename: "index.html",
      title: "react", //网页的title
    }),
    new CleanWebpackPlugin(), //每次打包清理上次的打包
    new MiniCssExtractPlugin({
      //希望css打包后是单独的文件
      filename: "[name].[hash:8].css",
    }),
  ],
};
module.exports = {
  resolvePath,
  baseConfig,
};
